<template>
  <div class="list">
    <img class="image" src="./image/1.jpg" alt="" />
    <div class="top">
      <div class="swiper">
        <span>21届</span>
        <carousel-3d
          :autoplay="true"
          :autoplayTimeout="3000"
          :perspective="35"
          :display="5"
          :animationSpeed="1000"
          :width="200"
          :height="420"
          controlsVisible
        >
          <slide v-for="(item, i) in imagebox.slice(0, 5)" :index="i" :key="i">
            <span></span>
            <img class="images" :src="item.srcs" />
            <img class="img" :src="item.src" alt="" />
            <div class="data">
              <h1 v-show="item.name != undefined">{{ item.title }}</h1>
              <h2>{{ item.name }}</h2>
              <h3 v-show="item.name != undefined">
                {{
                  "总时长：" +
                  Number(
                    (item.totalTime / 3600000)
                      .toString()
                      .match(/^\d+(?:\.\d{0,1})?/)
                  )
                }}
              </h3>
            </div>
          </slide>
        </carousel-3d>
      </div>
      <div class="swiper">
        <span>22届</span>
        <carousel-3d
          :autoplay="true"
          :autoplayTimeout="3000"
          :perspective="35"
          :display="5"
          :animationSpeed="1000"
          :width="200"
          :height="420"
          controlsVisible
        >
          <slide v-for="(item, i) in image.slice(0, 5)" :index="i" :key="i">
            <span></span>
            <img class="images" :src="item.srcs" />
            <img class="img" :src="item.src" alt="" />
            <div class="data">
              <h1 v-show="item.name != undefined">{{ item.title }}</h1>
              <h2>{{ item.name }}</h2>
              <h3 v-show="item.name != undefined">
                {{
                  "总时长：" +
                  Number(
                    (item.totalTime / 3600000)
                      .toString()
                      .match(/^\d+(?:\.\d{0,1})?/)
                  )
                }}
              </h3>
            </div>
          </slide>
        </carousel-3d>
      </div>
    </div>
    <div class="game">
      <div class="top1">
        <div class="left">
          <h1>21届总时长排行榜</h1>
          <h4>参于时长排名，为学习做好充足准备</h4>
        </div>
        <div class="right">
          <svg
            t="1650860394364"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9222"
            width="32"
            height="32"
          >
            <path
              d="M469.965 896.102c6.656-8.857 14.131-17.203 19.763-26.624 26.01-43.366 20.02-94.003-17.664-133.222-56.166-58.42-113.1-116.122-170.547-173.312-34.15-33.997-84.122-32.82-119.501 1.229-24.73 23.808-49.152 47.872-74.803 72.857-23.245-8.499-34.202-27.648-34.355-52.53-0.564-88.935-0.717-177.87 0.05-266.753 0.257-32.307 21.249-53.401 52.89-54.17 39.885-0.972 79.872-0.255 121.908-0.255-2.663 4.352-4.352 7.372-6.35 10.188-22.118 31.284-17.151 72.807 13.16 96.717 43.314 34.202 91.8 40.09 143.308 22.323 35.02-12.083 69.888-24.78 104.448-38.092 10.547-4.045 16.538-3.482 23.5 6.656 75.674 109.772 151.962 219.084 227.943 328.601 25.549 36.813 16.999 70.247-23.091 90.163-75.008 37.325-150.118 74.599-225.434 111.36-10.137 4.967-21.862 6.656-32.87 9.882-0.768-1.638-1.536-3.328-2.355-5.018z"
              fill="#007BFF"
              p-id="9223"
            ></path>
            <path
              d="M547.277 261.171c-51.149 23.86-100.762 46.49-149.914 70.144-29.389 14.183-56.985 9.216-83.865-5.171-18.79-10.035-21.504-26.47-6.042-41.216 19.046-18.176 38.86-36.045 60.416-50.995 42.957-29.747 86.784-58.368 131.38-85.658 55.96-34.201 110.796-21.606 164.812 7.117 50.586 26.88 101.632 52.89 152.32 79.462 22.118 11.572 45.517 13.927 70.144 13.466 46.387-0.87 65.946 19.098 65.997 65.075 0.051 82.688 0.102 165.427 0 248.115-0.051 45.364-19.303 64.461-64.717 64.512-23.654 0.052-47.309-0.665-70.86 0.256-11.982 0.461-19.047-3.225-26.01-13.363-77.005-112.179-154.676-223.949-232.141-335.82-3.533-4.967-7.168-9.882-11.52-15.924zM427.93 810.65c-3.943 14.13-6.452 28.876-12.135 42.29-9.677 22.99-34.355 30.465-54.528 15.924-60.723-43.776-121.139-88.115-180.94-133.12-23.86-17.971-25.447-48.18-5.428-71.424 9.267-10.803 19.303-21.043 29.696-30.822 20.173-18.944 50.33-18.176 69.99 1.69 44.545 44.8 88.884 89.855 133.428 134.706 11.161 11.213 19.558 23.501 19.917 40.756z"
              fill="#007BFF"
              p-id="9224"
            ></path>
            <path
              d="M862.515 292.864c0-15.309-0.819-30.413-2.048-45.414-15.206-1.536-29.9-5.12-44.032-12.544-50.739-26.573-101.785-52.583-152.32-79.463-54.016-28.723-108.851-41.37-164.813-7.117a2776.653 2776.653 0 0 0-131.379 85.658c-21.606 14.95-41.37 32.82-60.416 50.995-15.513 14.797-12.749 31.232 6.042 41.216 26.88 14.336 54.477 19.303 83.865 5.171 49.101-23.705 98.765-46.284 149.914-70.144 4.352 6.042 8.038 10.957 11.52 15.975 71.731 103.577 143.514 207.053 214.938 310.835 56.012-84.634 88.73-186.06 88.73-295.168zM274.637 635.136c-19.712-19.814-49.818-20.634-70.042-1.69-10.393 9.728-20.377 20.02-29.696 30.823-20.019 23.245-18.432 53.453 5.427 71.424 40.96 30.822 82.228 61.184 123.648 91.392 7.834 0.358 15.719 0.614 23.655 0.614 33.587 0 66.406-3.225 98.253-9.165 0.665-2.662 1.33-5.324 2.048-7.936-0.359-17.254-8.756-29.542-19.917-40.806-44.493-44.8-88.832-89.805-133.376-134.656z"
              fill="#007BFF"
              p-id="9225"
            ></path>
            <path
              d="M525.824 361.114c-7.014-10.138-12.954-10.701-23.5-6.656a3137.053 3137.053 0 0 1-104.449 38.092c-51.558 17.818-100.045 11.93-143.36-22.272-30.31-23.961-35.277-65.433-13.158-96.716 1.997-2.816 3.686-5.837 6.349-10.19-42.087 0-82.023-0.716-121.908 0.257-31.641 0.768-52.633 21.811-52.89 54.17-0.716 88.934-0.614 177.868-0.05 266.751 0.153 24.884 11.161 44.032 34.355 52.532 25.6-24.986 50.073-49.05 74.803-72.858 35.38-34.048 85.35-35.226 119.5-1.229 57.396 57.19 114.382 114.893 170.548 173.312 17.869 18.586 28.518 39.783 32.102 61.491 86.119-30.105 162.15-81.51 221.799-148.019-66.765-96.205-133.683-192.256-200.141-288.665z"
              fill="#007BFF"
              p-id="9226"
            ></path>
            <path
              d="M710.605 179.814c-15.514-8.09-31.079-16.128-46.541-24.37-54.016-28.724-108.851-41.37-164.813-7.118a2776.653 2776.653 0 0 0-131.379 85.658c-21.606 14.95-41.37 32.82-60.416 50.995-15.514 14.797-12.749 31.232 6.042 41.216 26.88 14.336 54.476 19.303 83.865 5.171 49.101-23.705 98.765-46.284 149.914-70.144 4.352 6.042 8.038 10.957 11.52 15.975l75.878 109.517c38.656-61.696 65.127-131.738 75.93-206.9z"
              fill="#007BFF"
              p-id="9227"
            ></path>
            <path
              d="M525.824 361.114c-7.014-10.138-12.954-10.701-23.5-6.656a3137.053 3137.053 0 0 1-104.449 38.092c-51.558 17.818-100.045 11.93-143.36-22.272-30.31-23.961-35.277-65.433-13.158-96.716 1.997-2.816 3.686-5.837 6.349-10.19-42.087 0-82.023-0.716-121.908 0.257-31.641 0.768-52.633 21.811-52.89 54.17-0.716 88.934-0.614 177.868-0.05 266.751 0.102 20.02 7.424 36.25 22.323 46.285 5.325 0.87 10.7 1.587 16.128 2.304 24.115-23.552 47.309-46.336 70.707-68.864 35.38-34.048 85.35-35.225 119.5-1.229 15.924 15.872 31.694 31.847 47.566 47.821 93.696-30.925 175.872-86.989 238.592-160.307-20.634-29.85-41.319-59.597-61.85-89.446z"
              fill="#007BFF"
              p-id="9228"
            ></path>
            <path
              d="M204.595 633.498c-1.331 1.228-2.56 2.56-3.891 3.788a538.945 538.945 0 0 0 68.506-6.81c-19.508-15.103-46.183-14.284-64.615 3.022z m83.661-242.688c-11.571-5.12-22.784-11.93-33.74-20.532-30.311-23.961-35.278-65.433-13.16-96.716 1.998-2.816 3.687-5.837 6.35-10.19-42.087 0-82.023-0.716-121.908 0.257-31.641 0.768-52.633 21.811-52.89 54.17-0.358 43.366-0.511 86.732-0.511 130.099 77.465-3.738 150.477-23.91 215.859-57.088z m246.477-258.1c-11.776 3.328-23.552 8.397-35.43 15.616a2776.653 2776.653 0 0 0-131.38 85.658c-21.606 14.95-41.37 32.82-60.416 50.995-15.513 14.797-12.749 31.232 6.042 41.216 18.534 9.882 37.478 15.36 57.037 13.107A537.702 537.702 0 0 0 534.733 132.71z"
              fill="#007BFF"
              p-id="9229"
            ></path>
          </svg>
          <h3>内卷竞赛</h3>
        </div>
      </div>
      <div class="random">
        <svg
          t="1650868351316"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="16371"
          width="30"
          height="30"
        >
          <path
            d="M752.89 356.741h57.565v97.06L957.44 283.095l-146.939-167.04v110.817h-57.559c-164.813 0-272.317 127.002-354.427 239.053-73.697 100.72-137.492 195.748-240.292 195.748H66.56v129.92h91.617c164.813 0 257.813-135.014 339.968-247.07 73.698-100.773 151.7-187.782 254.746-187.782z m-446.632 74.291l21.335-28.907c17.515-23.803 35.835-49.045 55.777-74.092-59.044-57.267-130.12-99.533-225.193-99.533H66.56v129.874s24.699-1.239 91.617 0c64.784 1.434 105.416 28.954 148.08 72.658zM810.5 666.665h-57.559c-62.766 0-125.42-36.373-170.312-84.629a929.229 929.229 0 0 1-13.557 18.463c-19.702 26.87-40.832 55.824-64.144 84.337 60.585 61.368 148.383 111.703 248.013 111.703h57.56v111.406L957.44 736.947 810.501 570.214v96.451z"
            p-id="16372"
            fill="#CC00FF"
          ></path>
        </svg>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="名次">
          <template slot-scope="scope">
            <img :src="tableDatas[scope.$index]" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="classNumber" label="班级"> </el-table-column>
        <el-table-column prop="studentId" label="学号"> </el-table-column>
        <el-table-column prop="totalTime" label="总时长">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{
                Number(
                  (scope.row.totalTime / 3600000)
                    .toString()
                    .match(/^\d+(?:\.\d{0,1})?/)
                )
              }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="game">
      <div class="top1">
        <div class="left">
          <h1>22届总时长排行榜</h1>
          <h4>参于时长排名，为学习做好充足准备</h4>
        </div>
        <div class="right">
          <svg
            t="1650860394364"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9222"
            width="32"
            height="32"
          >
            <path
              d="M469.965 896.102c6.656-8.857 14.131-17.203 19.763-26.624 26.01-43.366 20.02-94.003-17.664-133.222-56.166-58.42-113.1-116.122-170.547-173.312-34.15-33.997-84.122-32.82-119.501 1.229-24.73 23.808-49.152 47.872-74.803 72.857-23.245-8.499-34.202-27.648-34.355-52.53-0.564-88.935-0.717-177.87 0.05-266.753 0.257-32.307 21.249-53.401 52.89-54.17 39.885-0.972 79.872-0.255 121.908-0.255-2.663 4.352-4.352 7.372-6.35 10.188-22.118 31.284-17.151 72.807 13.16 96.717 43.314 34.202 91.8 40.09 143.308 22.323 35.02-12.083 69.888-24.78 104.448-38.092 10.547-4.045 16.538-3.482 23.5 6.656 75.674 109.772 151.962 219.084 227.943 328.601 25.549 36.813 16.999 70.247-23.091 90.163-75.008 37.325-150.118 74.599-225.434 111.36-10.137 4.967-21.862 6.656-32.87 9.882-0.768-1.638-1.536-3.328-2.355-5.018z"
              fill="#007BFF"
              p-id="9223"
            ></path>
            <path
              d="M547.277 261.171c-51.149 23.86-100.762 46.49-149.914 70.144-29.389 14.183-56.985 9.216-83.865-5.171-18.79-10.035-21.504-26.47-6.042-41.216 19.046-18.176 38.86-36.045 60.416-50.995 42.957-29.747 86.784-58.368 131.38-85.658 55.96-34.201 110.796-21.606 164.812 7.117 50.586 26.88 101.632 52.89 152.32 79.462 22.118 11.572 45.517 13.927 70.144 13.466 46.387-0.87 65.946 19.098 65.997 65.075 0.051 82.688 0.102 165.427 0 248.115-0.051 45.364-19.303 64.461-64.717 64.512-23.654 0.052-47.309-0.665-70.86 0.256-11.982 0.461-19.047-3.225-26.01-13.363-77.005-112.179-154.676-223.949-232.141-335.82-3.533-4.967-7.168-9.882-11.52-15.924zM427.93 810.65c-3.943 14.13-6.452 28.876-12.135 42.29-9.677 22.99-34.355 30.465-54.528 15.924-60.723-43.776-121.139-88.115-180.94-133.12-23.86-17.971-25.447-48.18-5.428-71.424 9.267-10.803 19.303-21.043 29.696-30.822 20.173-18.944 50.33-18.176 69.99 1.69 44.545 44.8 88.884 89.855 133.428 134.706 11.161 11.213 19.558 23.501 19.917 40.756z"
              fill="#007BFF"
              p-id="9224"
            ></path>
            <path
              d="M862.515 292.864c0-15.309-0.819-30.413-2.048-45.414-15.206-1.536-29.9-5.12-44.032-12.544-50.739-26.573-101.785-52.583-152.32-79.463-54.016-28.723-108.851-41.37-164.813-7.117a2776.653 2776.653 0 0 0-131.379 85.658c-21.606 14.95-41.37 32.82-60.416 50.995-15.513 14.797-12.749 31.232 6.042 41.216 26.88 14.336 54.477 19.303 83.865 5.171 49.101-23.705 98.765-46.284 149.914-70.144 4.352 6.042 8.038 10.957 11.52 15.975 71.731 103.577 143.514 207.053 214.938 310.835 56.012-84.634 88.73-186.06 88.73-295.168zM274.637 635.136c-19.712-19.814-49.818-20.634-70.042-1.69-10.393 9.728-20.377 20.02-29.696 30.823-20.019 23.245-18.432 53.453 5.427 71.424 40.96 30.822 82.228 61.184 123.648 91.392 7.834 0.358 15.719 0.614 23.655 0.614 33.587 0 66.406-3.225 98.253-9.165 0.665-2.662 1.33-5.324 2.048-7.936-0.359-17.254-8.756-29.542-19.917-40.806-44.493-44.8-88.832-89.805-133.376-134.656z"
              fill="#007BFF"
              p-id="9225"
            ></path>
            <path
              d="M525.824 361.114c-7.014-10.138-12.954-10.701-23.5-6.656a3137.053 3137.053 0 0 1-104.449 38.092c-51.558 17.818-100.045 11.93-143.36-22.272-30.31-23.961-35.277-65.433-13.158-96.716 1.997-2.816 3.686-5.837 6.349-10.19-42.087 0-82.023-0.716-121.908 0.257-31.641 0.768-52.633 21.811-52.89 54.17-0.716 88.934-0.614 177.868-0.05 266.751 0.153 24.884 11.161 44.032 34.355 52.532 25.6-24.986 50.073-49.05 74.803-72.858 35.38-34.048 85.35-35.226 119.5-1.229 57.396 57.19 114.382 114.893 170.548 173.312 17.869 18.586 28.518 39.783 32.102 61.491 86.119-30.105 162.15-81.51 221.799-148.019-66.765-96.205-133.683-192.256-200.141-288.665z"
              fill="#007BFF"
              p-id="9226"
            ></path>
            <path
              d="M710.605 179.814c-15.514-8.09-31.079-16.128-46.541-24.37-54.016-28.724-108.851-41.37-164.813-7.118a2776.653 2776.653 0 0 0-131.379 85.658c-21.606 14.95-41.37 32.82-60.416 50.995-15.514 14.797-12.749 31.232 6.042 41.216 26.88 14.336 54.476 19.303 83.865 5.171 49.101-23.705 98.765-46.284 149.914-70.144 4.352 6.042 8.038 10.957 11.52 15.975l75.878 109.517c38.656-61.696 65.127-131.738 75.93-206.9z"
              fill="#007BFF"
              p-id="9227"
            ></path>
            <path
              d="M525.824 361.114c-7.014-10.138-12.954-10.701-23.5-6.656a3137.053 3137.053 0 0 1-104.449 38.092c-51.558 17.818-100.045 11.93-143.36-22.272-30.31-23.961-35.277-65.433-13.158-96.716 1.997-2.816 3.686-5.837 6.349-10.19-42.087 0-82.023-0.716-121.908 0.257-31.641 0.768-52.633 21.811-52.89 54.17-0.716 88.934-0.614 177.868-0.05 266.751 0.102 20.02 7.424 36.25 22.323 46.285 5.325 0.87 10.7 1.587 16.128 2.304 24.115-23.552 47.309-46.336 70.707-68.864 35.38-34.048 85.35-35.225 119.5-1.229 15.924 15.872 31.694 31.847 47.566 47.821 93.696-30.925 175.872-86.989 238.592-160.307-20.634-29.85-41.319-59.597-61.85-89.446z"
              fill="#007BFF"
              p-id="9228"
            ></path>
            <path
              d="M204.595 633.498c-1.331 1.228-2.56 2.56-3.891 3.788a538.945 538.945 0 0 0 68.506-6.81c-19.508-15.103-46.183-14.284-64.615 3.022z m83.661-242.688c-11.571-5.12-22.784-11.93-33.74-20.532-30.311-23.961-35.278-65.433-13.16-96.716 1.998-2.816 3.687-5.837 6.35-10.19-42.087 0-82.023-0.716-121.908 0.257-31.641 0.768-52.633 21.811-52.89 54.17-0.358 43.366-0.511 86.732-0.511 130.099 77.465-3.738 150.477-23.91 215.859-57.088z m246.477-258.1c-11.776 3.328-23.552 8.397-35.43 15.616a2776.653 2776.653 0 0 0-131.38 85.658c-21.606 14.95-41.37 32.82-60.416 50.995-15.513 14.797-12.749 31.232 6.042 41.216 18.534 9.882 37.478 15.36 57.037 13.107A537.702 537.702 0 0 0 534.733 132.71z"
              fill="#007BFF"
              p-id="9229"
            ></path>
          </svg>
          <h3>内卷竞赛</h3>
        </div>
      </div>
      <div class="random">
        <svg
          t="1650868351316"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="16371"
          width="30"
          height="30"
        >
          <path
            d="M752.89 356.741h57.565v97.06L957.44 283.095l-146.939-167.04v110.817h-57.559c-164.813 0-272.317 127.002-354.427 239.053-73.697 100.72-137.492 195.748-240.292 195.748H66.56v129.92h91.617c164.813 0 257.813-135.014 339.968-247.07 73.698-100.773 151.7-187.782 254.746-187.782z m-446.632 74.291l21.335-28.907c17.515-23.803 35.835-49.045 55.777-74.092-59.044-57.267-130.12-99.533-225.193-99.533H66.56v129.874s24.699-1.239 91.617 0c64.784 1.434 105.416 28.954 148.08 72.658zM810.5 666.665h-57.559c-62.766 0-125.42-36.373-170.312-84.629a929.229 929.229 0 0 1-13.557 18.463c-19.702 26.87-40.832 55.824-64.144 84.337 60.585 61.368 148.383 111.703 248.013 111.703h57.56v111.406L957.44 736.947 810.501 570.214v96.451z"
            p-id="16372"
            fill="#CC00FF"
          ></path>
        </svg>
      </div>
      <el-table
        :data="tableData2"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="名次">
          <template slot-scope="scope">
            <img :src="tableDatas[scope.$index]" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="classNumber" label="班级"> </el-table-column>
        <el-table-column prop="studentId" label="学号"> </el-table-column>
        <el-table-column prop="totalTime" label="总时长">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{
                Number(
                  (scope.row.totalTime / 3600000)
                    .toString()
                    .match(/^\d+(?:\.\d{0,1})?/)
                )
              }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { Carousel3d, Slide } from "vue-carousel-3d";
import { getMessage } from "@/api";
import { getRank } from "@/api";
export default {
  components: {
    Carousel3d,
    Slide,
  },
  mounted() {
    this.getMessage();
    this.getRank();
    this.$emit("fatherMethods");
  },
  data() {
    return {
      imagebox: [
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
      ],
      image: [
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
        {
          src: "https://img2.baidu.com/it/u=1607477872,1571332842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
      ],
      tableData: [],
      tableData2: [],
      tableDatas: [
        "http://112.74.72.92:2048/images/8.png",
        "http://112.74.72.92:2048/images/9.png",
        "http://112.74.72.92:2048/images/10.png",
        "http://112.74.72.92:2048/images/11.png",
        "http://112.74.72.92:2048/images/12.png",
        "http://112.74.72.92:2048/images/13.png",
        "http://112.74.72.92:2048/images/14.png",
        "http://112.74.72.92:2048/images/15.png",
        "http://112.74.72.92:2048/images/16.png",
        "http://112.74.72.92:2048/images/17.png",
      ],
    };
  },
  methods: {
    getMessage() {
      let result = getMessage().then(({ data, server }) => {
        if ((result.code = 201)) {
          this.tableData = data;
          this.imagebox = data;
          this.server = server;
          let src = this.imagebox.map((item) => {
            return "http://112.74.72.92:2048/images/" + item.studentId + ".jpg";
          });
          let srcs = [
            "http://112.74.72.92:2048/images/1.png",
            "http://112.74.72.92:2048/images/2.png",
            "http://112.74.72.92:2048/images/3.png",
            "http://112.74.72.92:2048/images/4.png",
            "http://112.74.72.92:2048/images/5.png",
          ];
          src.map((v, i) => {
            this.imagebox[i].src = v;
          });
          let title = ["NO.1", "NO.2", "NO.3", "NO.4", "NO.5"];
          srcs.map((v, i) => {
            this.imagebox[i].srcs = v;
          });
          title.map((v, i) => {
            this.imagebox[i].title = v;
          });
          this.$emit("fatherMethod", server);
        }
      });
    },
    getRank() {
      let srcs = [
        "http://112.74.72.92:2048/images/1.png",
        "http://112.74.72.92:2048/images/2.png",
        "http://112.74.72.92:2048/images/3.png",
        "http://112.74.72.92:2048/images/4.png",
        "http://112.74.72.92:2048/images/5.png",
      ];
      srcs.map((v, i) => {
        this.image[i].srcs = v;
      });
      let result = getRank().then(({ data, server }) => {
        if ((result.code = 201 && data.studentId != undefined)) {
          this.tableData2 = data;
          this.image = data;
          this.server = server;
          let src = this.image.map((item) => {
            return "http://112.74.72.92:2048/images/" + item.studentId + ".jpg";
          });
          src.map((v, i) => {
            this.image[i].src = v;
          });
          let title = ["NO.1", "NO.2", "NO.3", "NO.4", "NO.5"];
          title.map((v, i) => {
            this.image[i].title = v;
          });
          this.$emit("fatherMethod", server);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  height: 87em;
  .image {
    width: 23em;
  }
  .top {
    width: 100%;
    height: 31em;
    background-size: 100% 100%;
    background-image: url(./image/1.webp);
    .swiper {
      width: 50%;
      float: left;
      /deep/ .carousel-3d-slide {
        border-radius: 20px;
        border: none;
        background-color: transparent;
      }
      /deep/ .prev,
      /deep/ .next {
        color: white;
      }
      .images {
        position: absolute;
        width: 4em;
        top: 0;
        left: 0.2em;
      }
      .img {
        width: 200px;
        height: 270px;
      }
      span {
        height: 0.9em;
      }
      .data {
        width: 10em;
        height: 15em;
        margin: 0 auto;
        h1,
        h2,
        h3 {
          font-size: 23px;
          font-family: "华文行楷", serif;
          float: left;
        }
        h1 {
          margin: 1em 0 0 0.9em;
        }
        h2 {
          width: 3.5em;
          text-align: center;
          margin: 1em 0 0 0.5em;
        }
        h3 {
          width: 7em;
          text-align: center;
          margin: 0.3em 0 0 0;
        }
      }
      span {
        font-size: 35px;
        font-family: "华文行楷", serif;
        font-weight: bolder;
        float: left;
        margin: 0 0 0.2em 7.5em;
      }
    }
  }
  .game {
    width: 45%;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    color: white;
    margin: 0 1.7em;
    float: left;
    .top1 {
      height: 5em;
      padding: 1.5em;
      .left {
        float: left;
        h1 {
          color: black;
          font-size: 28px;
        }
        h4 {
          margin-top: -1em;
          font-size: 13px;
          color: #bfbfbf;
        }
      }
      .right {
        float: right;
        margin-top: 1.8em;
        .icon {
          float: left;
          margin-top: 0.5em;
        }
        h3 {
          width: 7em;
          color: #007bff;
          font-size: 15px;
        }
      }
    }
    .random {
      width: 2.8em;
      height: 2.8em;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      float: right;
      margin: -1.7em 2em 0 1em;
      .icon {
        margin-top: 0.5em;
      }
    }
    .el-table {
      margin-top: 1.4em;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      ::v-deep .el-table__header-wrapper {
        height: 50px;
      }
      ::v-deep .el-table__header-wrapper .el-table__header {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
      }
    }
    img {
      width: 2.5em;
    }
  }
}
</style>
